import { Menu, Dropdown, Modal, Descriptions } from "antd";
import data from "./data";
import Setting from "./Setting";
import "./index.scss";

const { remote } = window.electron;
const currentWindow = remote.getCurrentWindow();
const { app, process } = remote;
const os = remote.require("os");

export default class Menus extends React.PureComponent {
  state = {
    settingVisible: false
  };

  /**
   * 关于
   */
  about = () => {
    Modal.info({
      title: app.name,
      centered: true,
      content: (
        <Descriptions column={1}>
          <Descriptions.Item label="版本">{app.getVersion()}</Descriptions.Item>
          <Descriptions.Item label="Electron">
            {process.versions.electron}
          </Descriptions.Item>
          <Descriptions.Item label="Chrome">
            {process.versions.chrome}
          </Descriptions.Item>
          <Descriptions.Item label="Node.js">
            {process.versions.node}
          </Descriptions.Item>
          <Descriptions.Item label="V8">
            {process.versions.v8}
          </Descriptions.Item>
          <Descriptions.Item label="OS">
            {os.type()} {os.arch()} {os.release()}
          </Descriptions.Item>
        </Descriptions>
      )
    });
  };

  /**
   * 切换开发者工具的显示
   */
  switchDevTool = () => {
    currentWindow.webContents.toggleDevTools();
  };

  /**
   * 设置
   */
  setting = () => {
    this.setState({
      settingVisible: true
    });
  };

  /**
   * 退出
   */
  exit = () => {
    app.quit();
    // 强制退出
    app.exit();
  };

  /**
   * 处理菜单子项
   */
  getMenus = menus => {
    return (
      <Menu theme="dark">
        {menus.map((item, index) => {
          if (item.divider) {
            return <Menu.Divider key={`item${index}`} />;
          }
          if (item.items) {
            return (
              <Menu.SubMenu key={`item${index}`} title={item.title}>
                {item.items.map((subItems, subIndex) => {
                  return (
                    <Menu.Item
                      key={`subItem${subIndex}`}
                      onClick={this[subItems.trigger]}
                    >
                      {subItems.title}
                      &nbsp;&nbsp;&nbsp;
                      {subItems.shortcuts && (
                        <span className="menu-shortcuts">
                          {subItems.shortcuts}
                        </span>
                      )}
                    </Menu.Item>
                  );
                })}
              </Menu.SubMenu>
            );
          }
          return (
            <Menu.Item key={`item${index}`} onClick={this[item.trigger]}>
              {item.title}
              &nbsp;&nbsp;&nbsp;
              {item.shortcuts && (
                <span className="menu-shortcuts">{item.shortcuts}</span>
              )}
            </Menu.Item>
          );
        })}
      </Menu>
    );
  };

  /**
   * 渲染
   */
  render() {
    return (
      <div className="menubar">
        {data.map((menu, index) => {
          return (
            <Dropdown
              key={`menu${index}`}
              overlay={this.getMenus(menu.items)}
              trigger={["click"]}
            >
              <div className="menubar-menu-button">{menu.title}</div>
            </Dropdown>
          );
        })}
        <Setting
          visible={this.state.settingVisible}
          onClose={() => this.setState({ settingVisible: false })}
        />
      </div>
    );
  }
}
